class Signature {
	constructor(arg) {
		this.canvas = document.querySelector(arg.el) // 获取canvas的dom节点
		this.ctx = this.canvas.getContext('2d') // 创建画布对象
		this.isDrawing = false // 是否正在画
		this.hasDraw = false // 是否含有画
		// this.canvas.width = arg.width || (document.documentElement.clientWidth - 40)
		this.canvas.height = arg.height || 150
		this.ctx.lineWidth = arg.lineWidth || 6
		this.ctx.strokeStyle = arg.lineColor || '#000'
		this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
	}

	// 创建画笔路径
	drawStart(e) {
		this.isDrawing = true
		this.ctx.beginPath()

		this.ctx.moveTo(
			!this.isMobile
				? e.clientX - this.canvas.parentNode.offsetLeft
				: e.targetTouches[0].clientX - this.canvas.parentNode.offsetLeft,
			!this.isMobile
				? e.clientY - this.canvas.parentNode.offsetTop
				: e.targetTouches[0].clientY - this.canvas.parentNode.offsetTop
		)
	}

	// 画笔绘画时
	drawing(e) {
		if (!this.isDrawing) return false

		this.hasDraw = true

		const x = !this.isMobile ? e.offsetX : e.targetTouches[0].clientX - e.target.parentNode.offsetLeft
		const y = !this.isMobile ? e.offsetY : e.targetTouches[0].clientY - e.target.parentNode.offsetTop

		this.ctx.lineTo(x, y)
		this.ctx.stroke()
	}

	// 结束绘画
	drawEnd() {
		this.ctx.closePath()
		this.isDrawing = false
	}

	// 生成base64格式图片并返回图片地址
	getDataImg() {
		this.ctx.save()
		const imgData = this.canvas.toDataURL()
		return imgData
	}

	getNewImg = async () => {
		let data = this.getDataImg()
		let dataUrl = await rotateBase(data)
		return dataUrl
	}

	// 清屏，清空画布内容
	clearCont() {
		this.ctx.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight)
		this.hasDraw = false
	}

	// 是否绘画了
	hasCont() {
		return this.hasDraw
	}

	// 初始化
	init() {
		const { down, move, up, out } = {
			down: this.isMobile ? 'touchstart' : 'mousedown',
			move: this.isMobile ? 'touchmove' : 'mousemove',
			up: this.isMobile ? 'touchend' : 'mouseup',
			out: this.isMobile ? 'touchend' : 'mouseout'
		}

		this.canvas.addEventListener(down, e => {
			this.drawStart(e)
			e.preventDefault()
		}, false)

		this.canvas.addEventListener(move, e => {
			this.drawing(e)
			e.preventDefault()
		}, false)

		this.canvas.addEventListener(up, () => {
			this.drawEnd()
		}, false)

		this.canvas.addEventListener(out, () => {
			this.ctx.closePath()
		})
	}
}
function rotateBase(data) {
	return new Promise(resolve => {
		const imgView = new Image()
		imgView.src = data
		var canvas = document.createElement('canvas')
		var context = canvas.getContext('2d')
		var cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }
		imgView.onload = () => {
			const imgW = imgView.width
			const imgH = imgView.height
			const size = imgH
			canvas.width = 2 * size
			canvas.height = 2 * size
			cutCoor = { sx: size, sy: size - imgW, ex: size + imgH, ey: size + imgW }
			context.translate(size, size)
			context.rotate(Math.PI / 2 * 3)
			context.drawImage(imgView, 0, 0)
			const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey)
			canvas.width = imgH
			canvas.height = imgW
			context.putImageData(imgData, 0, 0)

			resolve(canvas.toDataURL())
		}
	})
}
export default Signature

// 使用方式
/*
 * <canvas id="canvas"></canvas>
 */
// const canvas = new Signature({
// 	el: '#canvas',  // canvas节点dom
// 	lineWidth: 6  // 画笔宽度
// })
// canvas.init()